<template>
  <n-grid :x-gap="12" :y-gap="12" :cols="4">
    <n-gi :span="3">
      <n-grid x-gap="12" :cols="4">
        <n-gi>
          <n-card :bordered="false" title="用户" content-style="padding:0 12px 12px !important"
                  footer-style="padding:0 12px 12px !important">
            <div class="numbers">
              <div>{{ userData.total }}</div>
              <div class="icons" style="background: #dcfaf8;">
                <n-icon color="rgb(21 219 204)" :size="22">
                  <User/>
                </n-icon>
              </div>
            </div>
            <template #footer>
              <div class="footer-data">
                <div>
                  昨日:{{ userData.yesterday }}
                  <n-icon color="#18a058">
                    <TrendingUp/>
                  </n-icon>
                </div>
                <div>
                  今日:{{ userData.today }}
                  <n-icon color="#18a058">
                    <TrendingUp/>
                  </n-icon>
                </div>
              </div>
            </template>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card :bordered="false" title="教师" content-style="padding:0 12px 12px !important"
                  footer-style="padding:0 12px 12px !important">
            <div class="numbers">
              <div>{{ teacherData.total }}</div>
              <div class="icons" style="background: rgb(231 237 255)">
                <n-icon color="rgb(57 106 255)" :size="24">
                  <ChalkboardTeacher/>
                </n-icon>
              </div>
            </div>
            <template #footer>
              <div class="footer-data">
                <div>
                  昨日:{{ teacherData.yesterday }}
                  <n-icon color="#18a058">
                    <TrendingUp/>
                  </n-icon>
                </div>
                <div>
                  今日:{{ teacherData.today }}
                  <n-icon color="#18a058">
                    <TrendingUp/>
                  </n-icon>
                </div>
              </div>
            </template>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card :bordered="false" title="订单" content-style="padding:0 12px 12px !important"
                  footer-style="padding:0 12px 12px !important">
            <div class="numbers">
              <div>{{ orderData.total }}</div>
              <div class="icons" style="background: rgb(254 244 216)">
                <n-icon color="rgb(255 187 56)" :size="24">
                  <TextBulletListSquare24Filled/>
                </n-icon>
              </div>
            </div>
            <template #footer>
              <div class="footer-data">
                <div>
                  昨日:{{ orderData.yesterday }}
                  <n-icon color="#18a058">
                    <TrendingUp/>
                  </n-icon>
                </div>
                <div>
                  今日:{{ orderData.today }}
                  <n-icon color="#18a058">
                    <TrendingUp/>
                  </n-icon>
                </div>
              </div>
            </template>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card :bordered="false" title="提现" content-style="padding:0 12px 12px !important"
                  footer-style="padding:0 12px 12px !important">
            <div class="numbers">
              <div>{{withdrawalData.total}}</div>
              <div class="icons" style="background: rgb(255 242 248)">
                <n-icon color="rgb(254 131 162)" :size="24">
                  <ReceiptMoney24Filled/>
                </n-icon>
              </div>
            </div>
            <template #footer>
              <div class="footer-data">
                <div>
                  昨日:{{withdrawalData.yesterday}}
                  <n-icon color="#18a058">
                    <TrendingUp/>
                  </n-icon>
                </div>
                <div>
                  今日:{{withdrawalData.today}}
                  <n-icon color="#18a058">
                    <TrendingUp/>
                  </n-icon>
                </div>
              </div>
            </template>
          </n-card>
        </n-gi>
      </n-grid>
      <n-grid :x-gap="12" :y-gap="12" :cols="12" class="m-t-10">
        <n-gi :span="5">
          <n-card :bordered="false" title="用户统计" content-style="padding: 0 12px 12px 12px !important;">
            <div ref="userChart" style="width: 100%;height: 300px"></div>
          </n-card>
        </n-gi>
        <n-gi :span="7">
          <n-card :bordered="false" title="教师学历统计" content-style="padding: 0 12px 12px 12px !important;">
            <div ref="teacherEducation" style="width: 100%;height: 300px"></div>
          </n-card>
        </n-gi>
      </n-grid>
      <n-grid :x-gap="12" :y-gap="12" :cols="12" class="m-t-10">
        <n-gi :span="8">
          <n-card :bordered="false" title="订单趋势" content-style="padding: 0 12px 12px 12px !important;">
            <template #header-extra>
              <n-tag type="success">
                本月
              </n-tag>
            </template>
            <div ref="orderTrend" style="width: 100%;height: 300px"></div>
          </n-card>
        </n-gi>
        <n-gi :span="4">
          <n-card :bordered="false" title="提现统计" content-style="padding: 0 12px 12px 12px !important;">
            <div ref="withdrawal" style="width: 100%;height: 300px"></div>
          </n-card>
        </n-gi>
      </n-grid>
    </n-gi>
    <n-gi>
      <n-card :bordered="false">
        <div style="display: flex">
          <div class="avtar">
            <n-avatar v-if="userStore.avatar"
                      round
                      :size="52"
                      :src="'/api/admin/file/'+userStore.avatar"
            />
            <n-avatar v-else :style="avatarStyle" round :size="52">
              <span style="font-size: 22px;"> {{ userStore.nickName.charAt(0) }}</span>
            </n-avatar>
          </div>
          <div class="names" style="padding-left: 10px;">
            <h3 style="margin-block-start: 0.33em;margin-block-end:0;">
              欢迎您！{{ userStore.userName }}({{ userStore.nickName }})</h3>
            <!--            <p style="margin-block-start: 0.13em;margin-block-end:0.33em;">上次登录时间：{{ last_login }}</p>-->
            <!--            <p style="margin-block-start: 0.13em;margin-block-end:0.33em;">上次登录IP：{{ last_ip }}</p>-->
          </div>
        </div>
        <div class="now_date m-t-10" style="display: flex;justify-content: center">
          <n-date-picker :default-value="new Date().getTime()" panel type="date" :actions="null" size="large"
                         bind-calendar-months/>
        </div>
      </n-card>
      <n-card :bordered="false" title="公告" class="m-t-10"
              content-style="padding: 0 12px 12px 12px !important;">
        <template #header-extra>
          <n-button type="primary" text @click="moreData(0)">更多</n-button>
        </template>
        <div style="width: 100%;height: 170px">
          <div v-for="item in noticeData"
               style="display: flex;justify-content: space-between;color: rgb(133, 135, 153);height: 32px;align-items: center">
            <div>
              <n-icon>
                <IosSend/>
              </n-icon>
              &nbsp;
              <n-ellipsis style="max-width: 200px">
                {{ item.content }}
              </n-ellipsis>
            </div>
            <div>{{ item.createTime }}</div>
          </div>
        </div>
      </n-card>
      <n-card :bordered="false" title="广告" class="m-t-10"
              content-style="padding: 0 12px 12px 12px !important;">
        <template #header-extra>
          <n-button type="primary" text @click="moreData(1)">更多</n-button>
        </template>
        <div style="width: 100%;height: 195px">
          <table style="color: rgb(133, 135, 153);width: 100%">
            <thead>
            <tr align="left">
              <th>标题</th>
              <th style="width: 100px;">位置</th>
              <th style="width: 40px;">图片</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in advert" style="height: 32px;line-height: 32px;">
              <td>
                <n-ellipsis style="max-width: 160px">{{ item.title }}</n-ellipsis>
              </td>
              <td>{{ item.position }}</td>
              <td>
                <n-image
                    width="30"
                    :src="Config.VIEW_FILE +item.img"/>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </n-card>
    </n-gi>
  </n-grid>
</template>
<script lang="ts" setup>
import {onBeforeMount, ref, onMounted} from 'vue';
import {UseUserStore} from '@/stores/user.ts';
import {ThemesColor} from '@/config'
import * as echarts from 'echarts';
import {Config} from '@/config';
import {User, ChalkboardTeacher} from '@vicons/fa'
import {TrendingUp} from '@vicons/ionicons5'
import {TextBulletListSquare24Filled, ReceiptMoney24Filled} from '@vicons/fluent'
import {IosSend} from '@vicons/ionicons4'
import {useRouter} from "vue-router";
import {getRequest} from "@/api/data.ts";

const router = useRouter();
const userStore = UseUserStore();
//头像样式
const avatarStyle = ref({
  color: "white",
  backgroundColor: ThemesColor.appTheme
});

interface DataStatic {
  today?: number,
  yesterday?: number,
  total?:number,
  static?: { name: string, value: number }[]
}


const userData = ref<DataStatic>({
  total: 0,
  yesterday: 0,
  today: 0,
  static: []
})//用户数据
const teacherData = ref<DataStatic>({
  total: 0,
  yesterday: 0,
  today: 0,
  static: []
})//教师数据
const orderData = ref<DataStatic>({
  total: 0,
  yesterday: 0,
  today: 0,
  static: []
})//订单数据
const withdrawalData=ref<DataStatic>({
  total: 0,
  yesterday: 0,
  today: 0,
  static: []
});//提现数据统计
const userChart = ref<HTMLElement>();//用户统计
const teacherEducation = ref<HTMLElement>();//教师学历统计
const orderTrend = ref<HTMLElement>();//订单趋势
const withdrawal = ref<HTMLElement>();//提现统计

//公告
const noticeData = ref<{ content: string, createTime: string }[]>([])
const advert = ref<{ title: string, img: string, position: string }[]>([])
//初始化用户统计
const userChartInit = () => {
  const userCharts = echarts.init(userChart.value);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '用户性别占比',
        type: 'pie',
        radius: '50%',
        data: userData.value.static,
        emphasis: {
          itemStyle: {
            shadowBlur: 5,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  userCharts.setOption(option)
}
//教师学历统计
const teacherEducationInit = () => {
  const teacherCharts = echarts.init(teacherEducation.value);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '教师学历占比',
        type: 'pie',
        radius: '50%',
        data: teacherData.value.static,
        emphasis: {
          itemStyle: {
            shadowBlur: 5,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  teacherCharts.setOption(option)
}
//订单趋势
const orderTrendInit = () => {
  const order = echarts.init(orderTrend.value);
  let orderCounts=orderData.value.static.data?orderData.value.static.data:[];
  let lastIndex: number = -1;
  for (let i = orderCounts.length - 1; i >= 0; i--) {
    if (orderCounts[i] > 0) {
      lastIndex = i;
      break;
    }
  }
  if (lastIndex !== -1) {
    orderCounts = orderCounts.slice(0, lastIndex + 1);
  }
  const option = {
    xAxis: {
      type: 'category',
      data: orderData.value.static.date
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: orderCounts,
        type: 'line',
        smooth: true
      }
    ]
  };
  order.setOption(option)
}
//提现统计
const withdrawalInit = () => {
  const withdrawalHtml = echarts.init(withdrawal.value);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      left: 'center'
    },
    series: [
      {
        name: '提现统计',
        type: 'pie',
        radius: '50%',
        data:withdrawalData.value.static,
        emphasis: {
          itemStyle: {
            shadowBlur: 5,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  withdrawalHtml.setOption(option)
}
//更多
const moreData = (type: number) => {
  if (type === 0) {
    router.push({name: 'notice'})
  } else if (type === 1) {
    router.push({name: 'advert'})
  }
}
onBeforeMount(() => {
  getHomeData();
})

onMounted(() => {
  setTimeout(() => {
    userChartInit();
    teacherEducationInit();
    orderTrendInit();
    withdrawalInit();
  }, 300)
})

function getHomeData() {
  getRequest('sys/get_home').then((result: ResponseResult) => {
    const {data} = result;
    userData.value = data.user;
    teacherData.value = data.teacher;
    advert.value = data.advert;
    noticeData.value = data.notice;
    orderData.value = data.order;
    withdrawalData.value = data.withdrawal;
  })
}


</script>

<style scoped lang="scss">
.numbers {
  font-size: 22px;
  padding-left: 35px;
  font-weight: 600;
  display: flex;
}

.footer-data {
  display: flex;
  justify-content: space-around;
}

.icons {
  width: 40px;
  height: 40px;
  line-height: 45px;
  border-radius: 100px;
  text-align: center;
  margin-left: 5px;
}
</style>